<template>
	<view class="zh-order-purchase">
		<u-tabs :titles="['全部', '待确认', '待付款', '待收款','交易完成']" :markValue="orderSummaryData.detail" :active="tabActive" position="fixedTop" @click="clickTab"></u-tabs>
		<view class="section" v-for="item in purchaseData.list" :key="item.id" @click="navigateToDetail('/pages/order/purchase/detail?id=' + item.id)">
			<view class="display-flex justify-between font-28 mb-30">
				<text>订单号：{{ item.billno }}</text>
				<text class="font-FF661B" v-if="item.status === OrderStatus.edit">编辑</text>
				<text class="font-FF661B" v-if="item.status === OrderStatus.waitSure">待确认</text>
				<text class="font-FF661B" v-if="item.status === OrderStatus.assert">待付款</text>
				<text class="font-FF661B" v-if="item.status === OrderStatus.paid">待收款</text>
				<text class="font-FF661B" v-if="item.status === OrderStatus.paymented">已收款</text>
				<text class="font-1769ff" v-if="item.status === OrderStatus.done">交易完成</text>
				<text class="font-FF661B" v-if="item.status === OrderStatus.discard">已作废</text>
			</view>
			<view>
				<view class="title">
					<text class="font-26">{{ item.sellCompanyName }}</text>
				</view>
				<view class="display-flex justify-between content"  v-for="item1 in item.dtList" :key="item1.id">
					<view class="display-flex">
						<template  v-for="(file, fileIndex) in item1.wpggAFileDataList" :key="file.id">
							<image :src="previewImg(file.url)" v-if="fileIndex == 0" mode="aspectFit" class="cover-img"/> 
						</template>
						<view class="ml-20">
							<text class="font-26">{{ item1.spzs }}</text>
							<view class="font-666 font-22">
								<text class="display-block mt-10">数量：{{ item1.num }}件</text>
								<text class="display-block mt-10">单价：¥{{ item1.price }}/吨</text>
								<text class="display-block mt-10">重量：{{ item1.weight }}吨</text>
							</view>
						</view>
					</view>
					<view>
						<text class="font-26">¥{{ item1.subtotal }}</text>
					</view>
				</view>
			</view>
			<view class="display-flex justify-end align-center footer">
				<text class=" font-28" :class="[item.status === OrderStatus.done?'font-1769ff':'font-FF661B']">总价¥{{  item.subtotal }}</text>
				<view class="display-inline" v-if="item.status === OrderStatus.assert">
					<button class="right-btn" @click="handlePay(item)">立即付款</button>
				</view>
				<text class="font-666 font-26 ml-20" v-if="item.status === OrderStatus.paid">等待卖家收款</text>
			</view>
		</view>
		<view class="mt-200" v-if="purchaseData.total === 0">
			<empty-data  :imgSrc="IMG_URL + '/status/no_list.png'"></empty-data>
		</view>
		<view class="load-more" v-if="purchaseData.total > 0">
			<u-load-more  ref="loadMoreRef"></u-load-more>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { order } from '@/api'
	import { util } from '@/utils'
	import { useAuthStore } from '@/store/auth'
	import { Ordersource, Businesstype, Ordertype, OrderStatus, Warehousetype } from '@/enum/order'
	import { onLoad, onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import emptyData from '@/pages/components/empty-data'
	import { IMG_URL } from '@/utils/constant'
	
	const loadMoreRef = ref()
	const tabActive = ref(0)
	const authStore = useAuthStore()
	const user = authStore.getUser()
	const hasDetialPermi = ref(false)
	const purchaseData: any = reactive({
		query:{
			billno: "",
			businesstype: Businesstype.sales,
			buyid: user.shopId,
			endcreationdate: "",
			orderId: "",
			ordersource: "",
			ordertype: Ordertype.matchDeal,
			startcreationdate: "",
			status: "",
			warehousetype: Warehousetype.storageWarehouse,
			readSource: "APP",
			noLoading:false
		},
		params:{
			pageNum:1,
			pageSize:10,
			reasonable:false,
		},
		list:[],
		total:''
	})
	
	const menu:any = reactive({
		name: []
	})
	
	const orderSummaryData:any = reactive({
		detail:[0,0,0,0,0]
	})
	
	onLoad((options:any) => {
		if(options.status) {
			if(OrderStatus.waitSure === options.status) {
				tabActive.value = 1
			} else if(OrderStatus.assert === options.status) {
				tabActive.value = 2
			} else if(OrderStatus.paid === options.status) {
				tabActive.value = 3
			} else if(OrderStatus.done === options.status) {
				tabActive.value = 4
			}
			purchaseData.query.status = options.status
		}
		purchaseList()
		
	})
	
	onShow(() => {
		getRouters()
		orderSumList()
		getHasPermi()
	})
	
	onReachBottom(() => {
		if(purchaseData.params.pageNum * purchaseData.params.pageSize > purchaseData.total) return loadMoreRef.value.changeStatusNoMore()
		purchaseData.params.pageNum++
		loadMoreRef.value.changeStatusLoading()
		setTimeout(() => {
			purchaseData.query.noLoading = true
			purchaseList(() => {
				loadMoreRef.value.changeStatusNoLoading()
				if(purchaseData.params.pageNum * purchaseData.params.pageSize > purchaseData.total) return loadMoreRef.value.changeStatusNoMore()
			})
		}, 300)
	})
	
	onPullDownRefresh(() => {
		refresh()
		setTimeout(function () {
			uni.stopPullDownRefresh()
		}, 1000)
	})
	
	uni.$on('purchaseOrderUpdate', (res:any) => {
		refresh()
	})
	
	const purchaseList = (cb?:Function) => {
		order.getSaleOrderList(purchaseData.query, purchaseData.params).then((res:any) => {
			cb && cb()
			purchaseData.total = res.total
			purchaseData.list = [...purchaseData.list,...res.rows]
		})
	}
	
	const getRouters = () => {
		authStore.setRoutes().then((res:any) => {
			menu.names = res
		})
	}
	
	const getHasPermi = () => {
		authStore.getHasPermi('platform:order:detail').then((res:any) => {
			console.log(res)
			hasDetialPermi.value = res === true? true:false
		})
	}
	
	const orderSumList = () => {
		order.getOrderSummary({}).then((res:any) => {
			const data = res.data
			if(data && data.length > 0) {
				orderSummaryData.detail = [
					0,
					data[0],
					data[1],
					data[2],
					0
				]
			} else {
				orderSummaryData.detail = [0,0,0,0,0]
			}
			
		})
	}
	
	const clickTab  = (index:number) => {
		purchaseData.query.status = 
		index === 1? OrderStatus.waitSure
		:index === 2?OrderStatus.assert
		:index === 3?OrderStatus.paid
		:index === 4?OrderStatus.done:""
		refresh()
	}
	
	const handlePay = (item:any) => {
		navigateTo('/pages/order/purchase/detail?id=' + item.id)
	}
	
	const refresh = () => {
		purchaseData.query.noLoading = false
		if(loadMoreRef.value) loadMoreRef.value.changeStatusNoLoading()
		purchaseData.params.pageNum = 1
		purchaseData.list = []
		purchaseList()
	}
	
	const previewImg = (url:string) => {
		return util.previewImg(url)
	}
	
	const navigateToDetail = (url:string) => {
		if(hasDetialPermi.value === true) {
			uni.navigateTo({url:url})
		}
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.zh-order-purchase {
		padding: 120rpx 0;
		//background-color: #F5F5F5;
		.section {
			margin-top: 20rpx;
			background-color:$uni-bg-card-color;
			padding:30rpx;
			.title {
				border-top:1rpx solid $uni-border-color;
				padding-top:30rpx;
				margin-top:30rpx;
			}
			.content {
				margin-top: 30rpx;
				.cover-img {
					width:160rpx;
					height: 160rpx;
					border:1rpx solid #eee;
					border-radius:10rpx;
				}
			}
			.footer {
				margin-top: 5rpx;
				.right-btn {
					width:207rpx;
					height: 70rpx;
					box-sizing:border-box;
					text-align:center;
					background-color:#FF661B;
					color:#fff;
					font-size:26rpx;
					line-height:70rpx;
					margin-left: 20rpx;
					border-radius:4rpx;
				}
			}
		}
	}
</style>

